import { defineComponent, reactive } from "vue";
import styles from "./changePassword.module.less";
import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import {$modifyPassword} from "@/api/admin/admin";
import { message } from "ant-design-vue";
import { useStore as useUserStore } from "@/store/user";
import useNavigator from "@/hooks/useNavigator";
export default defineComponent({
  setup() {
    const navigator = useNavigator();
    const userStore = useUserStore();
    const redirectPath: any = navigator.route.query?.redirect || '/';
    const state = reactive({
      password: "",
      repassword: "",
    });
    const Components = () => (
      <Page>
        <CardWithTitle title="修改密码">
          <div class={styles.changePassword}>
            <div class={styles.newPasswordBox}>
              <div class={styles.titleBox}>新密码:</div>
              <a-input
                v-model:value={state.password}
                placeholder="请输入新密码"
                style={{ width: "500px" }}
                type="password"
              ></a-input>
            </div>
            <div class={styles.newPasswordBox}>
              <div class={styles.titleBox}>确认新密码:</div>
              <a-input
                v-model:value={state.repassword}
                placeholder="请第二次输入新密码"
                style={{ width: "500px" }}
                type="password"
              ></a-input>
            </div>
            <a-button type="primary" size="small" onClick={() => {
                if(state.password != state.repassword)
                {
                  message.success("两次密码不正确");
                    return;
                }
                $modifyPassword({
                  password:state.password,
                  repassword:state.repassword
                }).then((res:any)=>{
                  message.success("密码修改成功");
                  userStore.userinfo.is_reset_password = 0;
                  navigator.push(redirectPath);
                })
            }}>
               确认
            </a-button>
          </div>
        </CardWithTitle>
      </Page>
    );
    return {
      Components,
    };
  },
  render() {
    return <this.Components></this.Components>;
  },
});
